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Formularios web 


Son la forma principal de interacción entre la parte del cliente web y el 
servidor. Los formularios contienen datos otorgados por los usuarios para 
ser enviados a un servidor, o utilizado en el cliente como forma de 
interacción con los objetos de la web 


Están compuestos de controles (form controls) representados por 
elementos <input> en su mayoría y otros tales como <textarea>, <select>. 
También están compuestos por otros elementos para organizar la 
información como los <labe1> 


Los formularios suelen tener asociadas una validación para comprobar que 
los datos sean correctos. Esta validación no es suficiente, pero recomendada 


Todo comienza con un <form> 


<form action="destino" method="post"> 
<label for="nombre">Nombre:</label> 


<input type="text" id="nombre" name="nombre_usuario" value="" /> 


<label> 
Mensaje: 
<textarea name="mensaje_usuario"></textarea> 
</label> 
<input type="submit" value="Enviar mensaje"> 
</form> 


Controles nativos 


HTML incluye varios controles nativos. Los más importantes que vamos a 
ver son: 


* Input 
. Textarea 
« Dropdown (select -> options) 


Atributos en común 


La mayoría de estos controles tienen atributos propios, pero hay algunos 
que son compartidos prácticamente por todos ellos 


« autofocus: Da focus a un elemento que tenga este atributo al inicio del 
documento. 1 por documento 

* disabled: Quita la interacción con el elemento y su información no se 
envía 

* name: Nombre del elemento en el formulario 

« value: Valor inicial del elemento 


Existen varios tipos de <input>. Los mismos sirven para contener entradas 
de usuario de distinto tipo. Las más populares son: 


« Campo de texto: text, email, date, time, number, tel, url, password 
+ Campo de checkeo: checkbox, radio 

« Campo de botón: button, reset, submit, image, color 

« Campo de selección de archivos: file 

* Campo escondido: hidden 


Campos de texto 


Son campos que soportan una linea de texto 
La mayoría de estos soportan los siguientes atributos 


*« readonly: El valor no puede ser modificado, pero es enviado al servidor 

* placeholder: Texto que aparece por encima del campo mientras se 
encuentre vacío 

* size, maxlength: Restringe la cantidad de información que puede tener 


Campo password 


Esconde el texto para que no se pueda leer su contenido 
Aún así, su valor puede ser tomado por script, y se envia visible al servidor 


Solo previene robo de contraseñas de forma visual, sea presencial o si se 
esta compartiendo la vista 


Campos de checkeo 


Son campos que son modificados al clickear sobre ellos, y que pueden estar 
agrupados a otros campos de checkeo. 


Estos campos envian información solo cuando están activados. Si están 
desactivados, no envian nada de información, ni siquiera su nombre 


Radio: Los nombres de los radios necesitan ser iguales para estar 
relacionados 


Checkbox: Puede soportar múltiples valores si todos tienen el mismo 
nombre y el mismo esta en estilo de array 


Campos de botón 


Los botones son elementos interactuables el cual puede realizar una tarea 
programable, o en los casos de submit y reset, una tarea específica 


Submit, imagen: Envía el formulario a un destino definido en el formulario 
Reset: Reinicia el valor del formulario al que está relacionado 


Nota: image es una mezcla a un elemento <img> con un submit 


Campos de elección de archivos 


Este campo nos permite elegir archivos para que sean enviados al servidor 
Pueden ser varios archivos si agregamos el atributo multiple 


Nota: Los archivos elegidos solo están enlazados, se envían desde el origen 
del enlace al enviarse el formulario 


Es un campo de texto muy similar al input de tipo text. Las diferencias más 
importantes son que el textarea soporta múltiples lineas y que textarea 
necesita de una etiqueta de cierre. El contenido del elemento textarea se 
evalúa como el contenido por defecto del mismo 


Los atributos cols y rows definen el ancho y alto del campo de texto 


Select (dropdown) 


Es un campo que permite de forma sencilla mostrar una serie de distintas 
opciones y que el usuario elija una de ellas 


El elemento <select> contiene elementos <option> que son las opciones a 
mostrar, junto con un atributo value que indica que valor se enviará si la 
opción es elegida. Con el atributo selected se puede indicar cual es el valor 
por defecto 


El elemento <optgroup> permite armar distintos grupos para una ayuda 
visual ante gran cantidad de opciones 


Se puede agregar el atributo multiple para permitir elegir más de una opción 
a la vez. Esto rompe con la forma visual de un elemento con menú 
desplegable B 


Ejemplo en eclipse 


Estilo con bootstrap 


Los estilos en boostrap son dados en la mayoría de casos de manera 
automática con la clase form-control 


Los elementos se estructuran con la misma lógica de grilla utilizada 
previamente para el documento 


Bootstrap también dispone de estilos que cambian por completo el estilo 
original de algunos elementos, como en el caso de switch 


Validaciones 


Es importante comprobar que todos los campos deseados esten 
completados, de manera correcta y con el formato adecuado. Esto lo 
podemos realizar a través de las validaciones del formulario del lado del 
cliente o del frontend 


Las validaciones del lado del cliente son una comprobación inicial y una 
funcionalidad que es bueno incluirla para una mejor experiencia de usuario. 
Esto permite mejorar tiempos para informar errores (ya que no requiere de 
enviar datos) e integrar estilos y acciones de manera más natural 


No alcanza solo con validar en el cliente 


Validaciones 


Podemos validar principalmente de dos formas 


Si utilizamos la forma de JS, debemos comprobar cada campo y generar 
mensajes de error, cambios de estilos, etc, todo a mano. Todo esto, antes de 
enviar el formulario, normalmente en el evento de submit, o un botón que al 
validar correctamente los datos, ejecute el submit en el form 


La manera recomendada en este curso es utilizar la validación integrada en 
HTML5. La misma es mucho más sencilla de implementar ya que solo 
requiere decir que tipo de validaciones se desea realizar a través de atributos 


Validaciones nativas 


* required: El campo en cuestión debe contener información 

* minlength, maxlength: Largo mínimo y máximo de cadenas de texto 
« min, max: Valor mínimo y máximo numérico 

* pattern: Expresión regular que debe cumplir el campo 

« type: La propia validación del tipo incluida. Suele ser muy sencilla 


Validaciones con bootstrap 


Bootstrap tiene todo un modulo especialmente diseñado para validaciones. 
El mismo dispone de los estilos y la lógica para que funcione correctamente 
agregando funcionalidades como mensajes de error 


Para agregarlas se debe deshabilitar la validación por defecto de html y 
agregar un pequeño script incluido en la propia página de bootstrap 


Ejemplo en eclipse 
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Envío de información 


Una vez que la información haya sido validada de forma correcta, podemos 
enviar el formulario 


Cuando enviamos el formulario, la información deja nuestra computadora 
para viajar a la dirección del destino del formulario, viaja al servidor. 


No vamos a ver como es el protocolo de envío de información, pero les 
dejamos un enlace si les interesa saber más: 


https: //developer.mozilla.org/es/docs/Web/HTTP/Overview 
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Envío de información 


Atributos del formulario 


* action: URL destino de la información a enviar 
* method: El método de envío. Puede ser get o post 


Si se desea enviar un archivo se debe configurar el enctype del formulario. 
Nosotros utilizaremos “multipart/form-data” para este fin, y método post 
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¿GET? ¿POST? 


El método get se suele utilizar para pedir información, por lo tanto sus 
parámetros suelen ser públicos e ir directamente en la url 


El método post se utiliza normalmente para enviar información sensible 
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Con los avances de las web progresivas, no queremos tener que actualizar 
toda una página y su contenido para enviar y recibir información 


Para ello tenemos los pedidos XMLHttpRequest. Estos nos ayudaran a 
enviar información suelta o en un formulario, y recibir una respuesta sin 
necesidad de cambiar de página o actualizarla 


Estos mensajes suelen enviarse en formato JSON. Más información: 
https: //developer.mozilla.org/es/docs/Learn/JavaScript/Objects/J|SON 
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¡Muchas Gracias! 


continuará... 


